<template>
  <ul class="article bg-w">
    <ArticleItem
      v-for="(item, i) in data"
      :key="i"
      :article="item"
      :i="i"
      @addAgree="addAgree"
    ></ArticleItem>
  </ul>
</template>

<script>
import ArticleItem from "@/components/main/MainComponents/article/ArticleItem";
import { normlizeArticleMsg } from "@/utils/utils";
import { get_articles } from "@/api/article";
export default {
  name: "Article",
  components: {
    ArticleItem,
  },
  data() {
    return {
      data: [],
    };
  },
  methods: {
    addAgree(obj) {
      this.data[obj.key].agree += obj.num;
    },
  },
  async created() {
    const res = await get_articles();
    this.data = normlizeArticleMsg(res.data);
  },
};
</script>
